﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
        />
      </section>
    </header>
    <section class="content">
      <h2>正在进行/待办 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box">
        <!-- <li>
          <input type="checkbox" />
          <p>测试</p>
          <a href="javascript:;"></a>
        </li> -->
      </ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist">
        <!-- <li>
          <input type="checkbox"/>
          <p>吃饭</p>
          <a href="javascript:;"></a>
        </li> -->
      </ul>
    </section>
    <footer></footer>

    <script>
      let upArr = []
      let downArr = []
      // 刷新重新渲染
      window.addEventListener('load', function () {
        if (JSON.parse(localStorage.getItem('todolist'))) {
          upArr = JSON.parse(localStorage.getItem('todolist'))
        }
        if (JSON.parse(localStorage.getItem('donelist'))) {
          downArr = JSON.parse(localStorage.getItem('donelist'))
        }
        gettoDO()
        getCount()
      })
      // 回车本地存储，渲染结构
      document.querySelector('#title').addEventListener('keyup', (e) => {
        if (e.keyCode === 13) {
          let toDo = document.querySelector('#title').value.trim()
          document.querySelector('#title').value = ''
          if (toDo) {
            upArr.push(toDo)
            localStorage.setItem('todolist', JSON.stringify(upArr))
            gettoDO()
          }
        }
      })
      // 渲染结构
      function gettoDO() {
        document.querySelector('#todolist').innerHTML = ''
        if (JSON.parse(localStorage.getItem('todolist'))) {
          JSON.parse(localStorage.getItem('todolist')).map((item) => {
            const li = document.createElement('li')
            li.innerHTML = `<input type="checkbox"/>
          <p>${item}</p>
          <a href="javascript:;"></a>`
            // 渲染即添加类名后面用
            li.classList.add('todo')
            document.querySelector('#todolist').appendChild(li)
            getCount()
          })
        }

        document.querySelector('#donelist').innerHTML = ''
        if (JSON.parse(localStorage.getItem('donelist'))) {
          JSON.parse(localStorage.getItem('donelist')).map((item) => {
            const li = document.createElement('li')
            li.innerHTML = `<input type="checkbox"/>
          <p>${item}</p>
          <a href="javascript:;"></a>`
            // 渲染即添加类名后面用
            li.classList.add('done')
            li.firstChild.checked = true
            document.querySelector('#donelist').appendChild(li)
            getCount()
          })
        }
      }

      // 数量角标
      function getCount(){
        document.querySelector('#todocount').innerText = upArr.length
        document.querySelector('#donecount').innerText = downArr.length
      }

      // 删除
      document.querySelector('#todolist').addEventListener('click', (e) => {
        if (e.target.tagName === 'A') {
          document.querySelector('#todolist').removeChild(e.target.parentNode)
          upArr.splice(
            upArr.findIndex((v) => {
              return v === e.target.previousElementSibling.innerText
            }),
            1
          )
          localStorage.setItem('todolist', JSON.stringify(upArr))
          getCount()

          alert('删除成功')
        }
      })

      document.querySelector('#donelist').addEventListener('click', (e) => {
        if (e.target.tagName === 'A') {
          // console.log(e.target.parentNode);
          document.querySelector('#donelist').removeChild(e.target.parentNode)
          downArr.splice(
            downArr.findIndex((v) => {
              return v === e.target.previousElementSibling.innerText
            }),
            1
          )
          localStorage.setItem('donelist', JSON.stringify(downArr))
          getCount()

          alert('删除成功')
        }
      })

      // 移动
      // 获取所有li，遍历，状态为checked的append到下面去，同时取消checked状态再给它加一个类名，判断从下面跳上来的时候，有该类名的li如果状态为checked就加到上面去，然后删除类名和checked状态
      document.querySelector('.content').addEventListener('click', function () {
        document.querySelectorAll('li').forEach((item) => {
          // input标签
          let select = item.firstElementChild
          let todoStorage = JSON.parse(localStorage.getItem('todolist'))
          let doneStorage = JSON.parse(localStorage.getItem('donelist'))

          // 待办区域
          if (select.checked && item.classList.contains('todo')) {
            document.querySelector('#donelist').appendChild(item)
            item.classList.remove('todo')
            item.classList.add('done')
            // 遍历待办本地储存
            todoStorage.map((item) => {
              // 如果点击的那项p标签文本等于本地储存的某一项
              if (select.nextElementSibling.innerText === item) {
                downArr.push(item)
                todoStorage.splice(
                  todoStorage.findIndex((v) => {
                    return v === item
                  }),
                  1
                )
                upArr.splice(
                  upArr.findIndex((v) => {
                    return v === item
                  }),
                  1
                )
                localStorage.setItem('todolist', JSON.stringify(todoStorage))
                localStorage.setItem('donelist', JSON.stringify(downArr))
                getCount()
              }
            })
          }

          // 完成区域
          if (!select.checked && item.classList.contains('done')) {
            document.querySelector('#todolist').appendChild(item)
            item.classList.remove('done')
            item.classList.add('todo')
            // 遍历完成本地储存
            doneStorage.map((item) => {
              if (select.nextElementSibling.innerText === item) {
                upArr.push(item)
                doneStorage.splice(
                  doneStorage.findIndex((v) => {
                    return v === item
                  }),
                  1
                )
                downArr.splice(
                  downArr.findIndex((v) => {
                    return v === item
                  }),
                  1
                )
                localStorage.setItem('donelist', JSON.stringify(doneStorage))
                localStorage.setItem('todolist', JSON.stringify(upArr))
                getCount()
              }
            })
          }
        })
      })
    </script>
  </body>
</html>
